<template>
  <el-container class="main-container">
    <el-aside width="200px" class="sidebar">
      <el-menu default-active="0" class="category-menu" @select="handleSelect">
        <el-menu-item-group title="书籍分类">
          <el-menu-item v-for="(category, index) in categories" :key="index" :index="index.toString()">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">{{ category.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="系统功能">
          <el-menu-item index="login" @click="goToLogin">
            <i class="el-icon-user-solid"></i>
            <span slot="title">登录/注册</span>
          </el-menu-item>
          <el-menu-item index="orders" @click="goToOrders">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="cart" @click="goToCart">
            <i class="el-icon-shopping-cart-2"></i>
            <span slot="title">购物车管理</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="用户中心">
          <el-menu-item index="favorites" @click="goToFavorites">
            <i class="el-icon-star-off"></i>
            <span slot="title">我的收藏</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </el-aside>

    <el-main class="content-area">
      <div class="welcome-header">
        <h1 class="gradient-title">欢迎光临贰组的奇妙书店</h1>
        <p class="subtitle">探索知识与想象的边界</p>
      </div>

      <div class="category-detail">
        <h2 class="category-title">{{ currentCategory.name }}</h2>
        <div class="book-list">
          <el-card
              v-for="book in currentCategory.books"
              :key="book.id"
              class="book-card"
              shadow="hover"
          >
            <img 
              :src="book.cover" 
              alt="book cover" 
              class="book-cover" 
              @click="goToBookDetail(book)" 
              style="cursor: pointer;"
            >
            <div class="book-info">
              <h3>{{ book.title }}</h3>
              <p class="author">{{ book.author }}</p>
              <p class="price">¥ {{ book.price.toFixed(1) }}</p>
              <p class="stock">库存：{{ book.stock }}</p>
              <p class="description">{{ book.description || '暂无书籍描述' }}</p>
              <div class="button-group">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="addToCart(book)"
                  class="add-to-cart-btn"
                  :class="{ 'is-adding': isAdding }"
                >
                  <span class="btn-text">{{ isAdding ? '已加入' : '加入购物车' }}</span>
                </el-button>
                <el-button
                  :type="isFavorite(book) ? 'warning' : 'info'"
                  size="small"
                  @click="toggleFavorite(book)"
                  class="favorite-btn"
                  :class="{ 'is-favorite': isFavorite(book) }"
                >
                  <i :class="isFavorite(book) ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                  <span class="btn-text">{{ isFavorite(book) ? '已收藏' : '收藏' }}</span>
                </el-button>
                <el-button
                  type="success"
                  size="small"
                  @click="goToBookReviews(book)"
                  class="review-btn"
                  :class="{ 'is-clicked': isReviewClicked === book.id }"
                >
                  <i class="el-icon-chat-line-round"></i>
                  <span class="btn-text">评论</span>
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      activeCategory: 0,
      categories: [
        {
          name: "文学",
          books: [
            { id: 1, title: "红楼梦", author: "曹雪芹", price: 45.8, stock: 100, cover: '/images/红.jpg', description: '中国古典文学名著' },
            { id: 2, title: "活着", author: "余华", price: 28.5, stock: 50, cover: '/images/活.jpg', description: '讲述了在大时代背景下小人物的命运' },
            { id: 3, title: "围城", author: "钱钟书", price: 36.0, stock: 80, cover: '/images/围.jpg', description: '一部关于婚姻和人生的讽刺小说' }
          ]
        },
        {
          name: "科幻",
          books: [
            { id: 4, title: "三体", author: "刘慈欣", price: 56.0, stock: 150, cover: '/images/三.jpg', description: '中国科幻文学的经典之作' },
            { id: 5, title: "神经漫游者", author: "威廉·吉布森", price: 42.9, stock: 30, cover: '/images/神经.jpg', description: '赛博朋克文学的开山之作' },
            { id: 6, title: "沙丘", author: "弗兰克·赫伯特", price: 65.0, stock: 20, cover: '/images/沙.jpg', description: '科幻史上的经典巨著' }
          ]
        },
        {
          name: "历史",
          books: [
            { id: 7, title: "史记", author: "司马迁", price: 68.0, stock: 120, cover: '/images/史.jpg', description: '中国第一部纪传体通史' },
            { id: 8, title: "资治通鉴", author: "司马光", price: 75.5, stock: 90, cover: '/images/资.jpg', description: '编年体通史巨著' },
            { id: 9, title: "万历十五年", author: "黄仁宇", price: 32.8, stock: 180, cover: '/images/万.jpg', description: '以独特视角解读明朝历史' }
          ]
        },
        {
          name: "艺术",
          books: [
            { id: 10, title: "艺术的故事", author: "贡布里希", price: 228.0, stock: 50, cover: '/images/艺.jpg', description: '艺术史领域的经典著作' },
            { id: 11, title: "现代艺术150年", author: "威尔·贡培兹", price: 88.0, stock: 70, cover: '/images/现代.jpg', description: '了解现代艺术发展的佳作' },
            { id: 12, title: "写给大家的西方美术史", author: "蒋勋", price: 56.0, stock: 100, cover: '/images/写给.jpg', description: '通俗易懂的西方美术史读物' }
          ]
        },
        {
          name: "其他",
          books: [
            { id: 13, title: "时间简史", author: "霍金", price: 45.0, stock: 200, cover: '/images/时间.jpg', description: '全球科学著作的里程碑' },
            { id: 14, title: "人类简史", author: "尤瓦尔·赫拉利", price: 68.0, stock: 150, cover: '/images/人类.jpg', description: '从全新视角讲述人类历史' },
            { id: 15, title: "如何阅读一本书", author: "莫提默·J. 艾德勒", price: 38.0, stock: 80, cover: '/images/如何.jpg', description: '阅读方法的经典指南' }
          ]
        }
      ],
      favorites: JSON.parse(localStorage.getItem('favorites')) || [],
      isAdding: false,
      isTogglingFavorite: false,
      isReviewClicked: null
    };
  },
  computed: {
    currentCategory() {
      return this.categories[this.activeCategory];
    }
  },
  methods: {
    handleSelect(index) {
      this.activeCategory = parseInt(index);
    },
    async addToCart(book) {
      if (this.isAdding) return;
      
      if (!this.$store.state.user) {
        this.$message.warning('请先登录');
        this.$router.push({ path: '/login', query: { redirect: this.$route.fullPath } });
        return;
      }

      if (book.stock <= 0) {
        this.$message.error('该商品已售罄');
        return;
      }

      this.isAdding = true;
      try {
        await this.$store.dispatch('addToCart', book);
        this.$message.success(`已添加《${book.title}》到购物车`);
      } catch (error) {
        this.$message.warning(error);
      } finally {
        setTimeout(() => {
          this.isAdding = false;
        }, 1000);
      }
    },
    goToLogin() { this.$router.push('/login'); },
    goToOrders() { this.$router.push('/orders'); },
    goToCart() { this.$router.push('/cart'); },
    async toggleFavorite(book) {
      if (this.isTogglingFavorite) return;
      
      if (!this.$store.state.user) {
        this.$message.warning('请先登录');
        this.$router.push({ path: '/login', query: { redirect: this.$route.fullPath } });
        return;
      }

      this.isTogglingFavorite = true;
      try {
        const index = this.favorites.findIndex(b => b.id === book.id);
        if (index === -1) {
          this.favorites.push(book);
          this.$message.success(`已收藏《${book.title}》`);
        } else {
          this.favorites.splice(index, 1);
          this.$message.info(`已取消收藏《${book.title}》`);
        }
        localStorage.setItem('favorites', JSON.stringify(this.favorites));
      } finally {
        setTimeout(() => {
          this.isTogglingFavorite = false;
        }, 500);
      }
    },
    goToFavorites() { this.$router.push('/favorites'); },
    goToBookReviews(book) {
      if (this.isReviewClicked === book.id) return;
      
      if (!this.$store.state.user) {
        this.$message.warning('请先登录');
        this.$router.push({ path: '/login', query: { redirect: '/reviews', bookId: book.id } });
        return;
      }

      this.isReviewClicked = book.id;
      setTimeout(() => {
        this.isReviewClicked = null;
        this.$router.push({ path: '/reviews', query: { bookId: book.id } });
      }, 300);
    },
    goToBookDetail(book) {
      this.$router.push({
        name: 'BookDetail',
        query: { id: book.id }
      });
    },
    isFavorite(book) {
      return this.favorites.some(b => b.id === book.id);
    }
  }
};
</script>

<style scoped>
.main-container {
  height: 100vh;
  background: #f8f9fa;
}

.sidebar {
  background-color: #ffffff;
  border-right: 1px solid #e4e7ed;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.welcome-header {
  text-align: center;
  margin: -20px 0 40px;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.welcome-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
  z-index: 0;
}

.gradient-title {
  font-size: 2.8rem;
  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 50%, #37ecba 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 2px;
  margin: 0;
  position: relative;
  z-index: 1;
  animation: gradientShift 8s ease infinite;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.subtitle {
  color: #6c757d;
  font-size: 1.3rem;
  margin-top: 20px;
  letter-spacing: 1.5px;
  position: relative;
  z-index: 1;
  font-weight: 300;
}

.category-title {
  color: #495057;
  font-size: 1.8rem;
  margin-bottom: 30px;
  font-weight: 600;
  position: relative;
  padding-left: 25px;
}

.category-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 80%;
  background: linear-gradient(180deg, #6a11cb 0%, #2575fc 100%);
  border-radius: 2px;
}

.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.book-card {
  background: #ffffff;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.book-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 25%, rgba(106, 17, 203, 0.05) 50%, transparent 75%);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.5s;
}

.book-card:hover::before {
  opacity: 1;
}

.book-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(106, 17, 203, 0.15);
}

.book-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}

.book-info {
  padding: 20px;
  text-align: center;
}

.author {
  color: #909399;
  font-size: 13px;
  margin: 10px 0;
}

.price {
  color: #6a11cb;
  font-size: 18px;
  font-weight: 700;
  margin: 15px 0;
}

.stock {
  color: #67c23a;
  font-size: 14px;
  margin: 8px 0;
}

.description {
  color: #606266;
  font-size: 14px;
  margin-bottom: 15px;
  min-height: 40px;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.el-button {
  transition: all 0.3s ease;
  min-width: 100px;
  margin: 0;
  padding: 8px 15px;
  white-space: nowrap;
}

.add-to-cart-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 120px;
}

.add-to-cart-btn.is-adding {
  transform: scale(0.95);
  background-color: #67c23a;
}

.add-to-cart-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.add-to-cart-btn.is-adding::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

.btn-text {
  display: inline-block;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

.add-to-cart-btn.is-adding .btn-text {
  transform: scale(0.9);
}

.el-button--primary {
  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
  border: none;
  color: white;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
}

.el-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(106, 17, 203, 0.1);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
  .gradient-title { font-size: 2rem; }
  .subtitle { font-size: 1.1rem; }
  .category-title { font-size: 1.4rem; }
  .book-list { grid-template-columns: 1fr; }
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .el-button {
    width: 100%;
    margin: 5px 0;
  }
  
  .add-to-cart-btn {
    min-width: 100%;
  }
}

.favorite-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 100px;
}

.favorite-btn.is-favorite {
  transform: scale(0.95);
  animation: favoritePulse 0.5s ease;
}

.favorite-btn i {
  margin-right: 4px;
  transition: all 0.3s ease;
}

.favorite-btn.is-favorite i {
  transform: scale(1.2);
  color: #e6a23c;
}

@keyframes favoritePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(0.95);
  }
}

.favorite-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.favorite-btn.is-favorite::after {
  animation: ripple 1s ease-out;
}

.favorite-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.2);
}

.favorite-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(230, 162, 60, 0.1);
}

.review-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, #67c23a 0%, #85ce61 100%);
  border: none;
  color: white;
  flex: 1;
  min-width: 100px;
}

.review-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.2);
}

.review-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(103, 194, 58, 0.1);
}

.review-btn.is-clicked {
  transform: scale(0.95);
  animation: reviewPulse 0.3s ease;
}

.review-btn i {
  margin-right: 4px;
  transition: all 0.3s ease;
}

.review-btn.is-clicked i {
  transform: scale(1.2);
}

.review-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.review-btn.is-clicked::after {
  animation: ripple 0.6s ease-out;
}

@keyframes reviewPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(0.95);
  }
}

.review-btn .btn-text {
  display: inline-block;
  transition: all 0.3s ease;
}

.review-btn.is-clicked .btn-text {
  transform: scale(0.9);
}
</style>